<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('myDaily.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDailyManage.name')}}</div>
              <el-input v-model="listQuery.userName" :placeholder="$t('myDailyManage.placeholder.pleaseImport')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDailyManage.timeCondition')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="time" type="daterange" range-separator="-" :start-placeholder="$t('myDailyManage.placeholder.startTime')" :end-placeholder="$t('myDailyManage.placeholder.endTime')"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.cooReport.projectNo')}}</div>
              <el-input v-model="listQuery.projectNo" :placeholder="$t('myDailyManage.placeholder.pleaseImport')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <yt-get-template-select v-model="listQuery.bu" :filterable="true" :listData="'bu'" :placeholder="$t('myDailyManage.placeholder.pleaseImport')"></yt-get-template-select>
            </div>
          </el-col>
          <el-col :span="6" style="margin-top: 33px">
            <el-button class="yt-btn-ys" type="primary" @click="handleFilter">{{$t('myDaily.query')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('myDaily.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="show" :element-loading-text="$t('projectRevenue.cooReport.loading')" element-loading-spinner="el-icon-loading">
      <div class="yt-list-contentg" style="position: relative;">
        <span>{{$t('route.dailyHrsReport')}}</span>
        <div class="yt-content-type">
          <div class="list-content-textType">{{$t('projectRevenue.cooReport.viewModle')}}</div>
          <el-select class="filter-item" v-model="pattern"  :placeholder="$t('placeholder.content')">
            <el-option v-for="item in patternList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="yt-list-box">
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-btn-ys" type="primary" @click="exportData">{{$t('button.export')}}</div>
          </div>
          <el-table v-show="pattern === '1'" :data="buList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="600">
            <el-table-column type="index" align="center" :label="$t('myDaily.index')" width="60"/>
            <el-table-column align="center" label="Account" prop="bu"/>
            <el-table-column align="center" :label="$t('myDaily.hrs')" prop="hrs"/>
            <el-table-column align="center" :label="$t('myDaily.createName')" prop="userName"/>
          </el-table>

          <el-table v-show="pattern === '2'" :data="projectList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="600">
            <el-table-column type="index" align="center" :label="$t('myDaily.index')" width="60"/>
            <el-table-column align="center" label="Project No." prop="projectNo"/>
            <el-table-column align="center" label="Project Name" prop="projectName"/>
            <el-table-column align="center" :label="$t('myDaily.hrs')" prop="hrs"/>
            <el-table-column align="center" :label="$t('myDaily.createName')" prop="userName"/>
          </el-table>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { queryDailyHrsReport, exportDailyHrsBuReport, exportDailyHrsProjectReport } from '@/api/dailyAdministrator/myDaily';
  import formatter from '@/utils/formatter';
  import YtGetTemplateSelect from '@/components/Yt-template/getTemplateSelect.vue';
  export default {
    name: 'dailyHrsReport',
    components: {
      YtGetTemplateSelect
    },
    data() {
      return {
        formatter,
        statusName: this.$store.getters.allMapDic.dailyStatus,
        listQuery: {
          page: 1,
          limit: 10,
          startTime: '',
          endTime: ''
        },
        show: false,
        pattern: '1',
        patternList: [{
          value: '1',
          label: this.$t('projectRevenue.cooReport.buModel') // 'BU模式'
        }, {
          value: '2',
          label: this.$t('projectRevenue.cooReport.projectModel') // Project模式
        }],
        time: [],
        buList: [],
        projectList: []
      };
    },
    methods: {
      getData() {
        this.show = true
        this.listQuery.startTime = this.time[0];
        this.listQuery.endTime = this.time[1];
        queryDailyHrsReport(this.listQuery).then(res => {
          this.buList = res.data.bu
          this.projectList = res.data.project
          this.show = false
        });
      },
      handleFilter() {
        this.getData();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getData();
      },
      reset() {
        // 重置函数
        this.listQuery = {};
        this.time = [];
        this.getData();
      },
      exportData() {
        const a = document.createElement('a');
        if (this.pattern === 1) {
          const href = exportDailyHrsBuReport(this.buList, this.$store.getters.info.id, this.listQuery.year);
          a.href = href;
        } else {
          const href = exportDailyHrsProjectReport(this.projectList, this.$store.getters.info.id, this.listQuery.year);
          a.href = href;
        }
        a.download = Date.now()
        a.click();
      }
    }
  };
</script>
<style scoped>
</style>
